<!--
 * @Description: 
 * @Author: zzj
 * @Date: 2021-10-25 17:09:19
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-26 15:04:16
-->
<template>
	<div class="carousel_list page_tem_1" v-loading="loading">
		<!-- 按钮 -->
		<div class="btns">
			<el-form>
				<el-form-item>
					<el-button  type="primary" plain size="mini" @click="addCarouselHandler">添加</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!-- 按钮结束 -->
		<!-- 数据 -->
		<div class="content">
			<ul>
				<li v-for="c in carouselData" :key="c.id">
					<el-card class="box-card">
						<template #header>
							<div class="card-header">
								<span :class="[c.status==='停用'?'a':'b']">{{c.status}}</span>
								<div class="carousel_options">
									<el-button type="primary" plain size="small" @click="editCarouselHandler(c)">修改</el-button>
									<el-button type="danger" plain size="small" @click="delCarouselHandler(c)">删除</el-button>
								</div>
							</div>
						</template>
						<div class="card-content">
							<div class="carousel_id"><span>轮播图编号:</span>{{c.id}}</div>
							<div class="carousel_name"><span>轮播图名称:</span>{{c.name}}</div>
							<div class="carousel_introduce"><span>轮播图描述:</span>{{c.introduce}}</div>
							<div class="carousel_photo">
								<span>轮播图图片:</span>
								<div>
									<img :src="c.url" alt="">
								</div>
							</div>
						</div>
					</el-card>
				</li>
			</ul>
		</div>
		<!-- 数据结束 -->
		<!-- 抽屉 -->
		<el-drawer
			size="50%"
			:title="title"
			:visible.sync="visible"
			@closed="clearValidate('pc_form')"
			>
			<div class="drawer__content" style="padding:0 2em">
				<el-form class="drawer__container" ref="pc_form"  label-width="70px" :model="form">
					<el-form-item label="名称" prop="name">
						<el-input v-model="form.name" size="small"></el-input>
					</el-form-item>
					<el-form-item label="描述" prop="introduce">
						<el-input type="textarea" v-model="form.introduce" size="small"></el-input>
					</el-form-item>
					<el-form-item label="图片">
						<el-upload
							class="avatar-uploader"
							:action="baseUrl +'/file/upload'"
							:show-file-list="false"
							list-type="picture-card"
							:on-success="handleUploadSuccess">
							<img v-if="form.url" :src="form.url" class="avatar">
							<i v-else class="el-icon-plus" ></i>
						</el-upload>
					</el-form-item>
					<el-form-item class="drawer__footer" style="text-align:right;margin-right:5%">
						<el-button type="primary" @click="submitCarouselHandler">提交</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-drawer>
		<!-- /抽屉 -->
	</div>
</template>

<script>
import {get,post} from "@/utils/request";
import _ from "lodash";
export default {
	data(){
		return {
			baseUrl:process.env.VUE_APP_BASE_API,   //接口基地址
			filUrl:process.env.VUE_APP_FILE_BASE_URL,   //文件上传地址
      visible: false,
			loading:false,
			title:"",
			carouselData:{},
			form:{},
		}
	},
	mounted(){
		this.loadCarousels();
	},
	methods:{
		// 获取轮播图数据
		loadCarousels(){   
			this.loading = true;
			let url = "/carousel/findAll"
			get(url,this.params).then(resp =>{
					this.carouselData = resp.data;
			}).finally(()=>{
				this.loading = false;
			})
		},
		
		// 抽屉
		// 添加轮播图
		addCarouselHandler(){
			this.form = {};
			this.title = "添加轮播图"
			this.visible = true;
		},
		// photo上传成功
		handleUploadSuccess(resp){
			if(resp.status === 200){
				let {id,groupName} = resp.data;
				// http://121.199.29.84:8888/group1/xxx.jpg
				let icon_url = this.filUrl + groupName + "/" + id;
				this.$set(this.form,"url",icon_url)
			} else {
				this.$message({type:"error",message:resp.message})
			}
		},
		// 提交
		submitCarouselHandler(){
			this.$refs.pc_form.validate(valid =>{
				if(valid){
					let url = "/carousel/saveOrUpdate"
					post(url,this.form).then(resp =>{
					this.$message.success(resp.message)
					this.visible = false;
					this.loadCarousels();
				})
				}
			})
		},
		// 关闭抽屉清理遗留校验结果
		clearValidate(ref){
			this.$refs[ref].clearValidate();
		},
		// 删除轮播图
		delCarouselHandler({id}){
			// 1.询问
			this.$confirm('此操作将永久删除该轮播图, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(()=>{
				// 2.删除
				let url = "/carousel/deleteById";
				get(url,{id}).then(resp =>{
					this.$message.success(resp.message)
					this.loadCarousels();
				})
			})
		},
		// 修改轮播图
		editCarouselHandler(row){
			this.title = "修改轮播图信息"
			this.form = _.cloneDeep(row);
			this.visible = true;
		},
	}
}
</script>

<style lang="scss" scoped>
	.carousel_list {
		padding-left: 5%;
		.btns {
			text-align: start;
		}
		.content {
			overflow: hidden;
			ul {
				width: 100%;
				li {
					float: left;
					width: 45%;
					padding-right: 5%;
					.box-card {
						margin: 1em 5%;
						width: 100%;
						.card-header {
							display: flex;
							justify-content: space-between;
							align-items: center;
							.carousel_options {
								display: inline-block;
							}
							// 不同状态变色
							.a{
								color: #ff7c7c;
								padding: .2em .3em;
								border: 1px solid #ffeded;
								border-radius: 5px;
								background-color: #ffeded;
							}
							.b {
								color: rgb(46, 187, 18);
								padding: .2em .3em;
								border: 1px solid #e4f9ee;
								border-radius: 5px;
								background-color: #e4f9ee;
							}
						}
						.card-content {
							div {
								padding: .5em 0;
								span {
									font-size: 16px;
									overflow: hidden;
								}
								img{
									padding: 0 1em;
									height: 200px;
								}
							}
						}
					}
				}
			}
		}
	}
</style>